<template>
    <div id="convo" data-from="Sonu Joshi">
        <ul class="chat-thread">
            <li :class="[item.isRobot? robot:user]" v-for="item in list">{{item.text}}</li>
        </ul>
        <div class="chat-user" style="display: flex">
            <el-input style="flex: 10"
                    type="textarea"
                    :autosize="{ minRows: 2, maxRows: 4}"
                    placeholder="请输入内容"
                    v-model="textarea3">
            </el-input>
            <el-button style="flex:1;height: 54px;" @click.native="putMessage">点击发送</el-button>
        </div>
        <div style="margin: 20px 0;"></div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                url: '',
                name: '',
                textarea3:'',
                list: [

                ],
                robot:'robot',
                user:'user'
            }
        },
        mounted(){
            var _this = this
            this.http.post('/users/info').then(function (res) {
                if (res.data.login == 0) {
                    console.log('用户未登录')
                } else if (res.data.login == 1) {
                    _this.name = res.data.name
                    _this.url = '/users/show/' + _this.avator
                }
            })

        },
        methods: {
            putMessage(){
                var _this = this;
                this.list.push({text:this.textarea3,isRobot:false});
                var params = new URLSearchParams();
                params.append('info', this.textarea3);
                this.http.post('/users/service',params).then(function (data) {
                    _this.textarea3='';
                    _this.list.push(data.data)
                    _this.$set(data.data,"isRobot",true)
                }).catch(function (err) {
                    console.log(err);
                })
            }
        },
        computed:{

        }
    }
</script>
<style scoped>

    .chat-thread {
        margin: 24px auto 0 auto;
        padding: 0 20px 0 0;
        list-style: none;
        overflow-y: scroll;
        overflow-x: hidden;
    }

    .chat-thread li {
        position: relative;
        clear: both;
        display: inline-block;
        padding: 16px 40px 16px 20px;
        margin: 0 0 20px 0;
        font: 16px/20px 'Noto Sans', sans-serif;
        border-radius: 10px;
        background-color: rgba(25, 147, 147, 0.2);
    }

    /* Chat - Avatar */
    .chat-thread li:before {
        position: absolute;
        top: 0;
        width: 50px;
        height: 50px;
        border-radius: 50px;
        content: '';
    }

    /* Chat - Speech Bubble Arrow */
    .chat-thread li:after {
        position: absolute;
        top: 15px;
        content: '';
        width: 0;
        height: 0;
        border-top: 15px solid rgba(25, 147, 147, 0.2);
    }

    .chat-thread li.user {
        animation: show-chat-odd 0.15s 1 ease-in;
        -moz-animation: show-chat-odd 0.15s 1 ease-in;
        -webkit-animation: show-chat-odd 0.15s 1 ease-in;
        float: right;
        margin-right: 80px;
        color: #0AD5C1;
    }

    .chat-thread li.user:before {
        right: -80px;
        content:'我说'
        /*background-image: url('../assets/images/header/header_photo.png');*/
    }

    .chat-thread li.user:after {
        border-right: 15px solid transparent;
        right: -15px;
    }

    .chat-thread li.robot {
        animation: show-chat-even 0.15s 1 ease-in;
        -moz-animation: show-chat-even 0.15s 1 ease-in;
        -webkit-animation: show-chat-even 0.15s 1 ease-in;
        float: left;
        margin-left: 80px;
        color: #0EC879;
    }

    .chat-thread li.robot:before {
        content: '客服:';
        left: -80px;
    }

    .chat-thread li.robot:after {
        border-left: 15px solid transparent;
        left: -15px;
    }

    .chat-window {
        position: fixed;
        bottom: 18px;
    }

    .chat-window-message {
        width: 100%;
        height: 48px;
        font: 32px/48px 'Noto Sans', sans-serif;
        background: none;
        color: #0AD5C1;
        border: 0;
        border-bottom: 1px solid rgba(25, 147, 147, 0.2);
        outline: none;
    }


    /* Small screens */
    @media all and (max-width: 767px) {
        .chat-thread {
            width: 90%;
            height: 260px;
        }

        .chat-window {
            left: 5%;
            width: 90%;
        }
        .chat-user {
            width: 90%;
            height: 200px;
        }
    }
    /* Medium and large screens */
    @media all and (min-width: 768px) {
        .chat-thread {
            width: 50%;
            height: 320px;
        }

        .chat-window {
            left: 25%;
            width: 50%;
        }
        .chat-user {
            width: 50%;
            height: 200px;
        }
    }

    .chat-user {
        display: block;
        height: 50px;
        margin: 24px auto 0 auto;
        font-size: 24px;
    }

    @keyframes show-chat-even {
        0% {
            margin-left: -480px;
        }

        100% {
            margin-left: 0;
        }
    }

    @-moz-keyframes show-chat-even {
        0% {
            margin-left: -480px;
        }

        100% {
            margin-left: 0;
        }
    }

    @-webkit-keyframes show-chat-even {
        0% {
            margin-left: -480px;
        }

        100% {
            margin-left: 0;
        }
    }

    @keyframes show-chat-odd {
        0% {
            margin-right: -480px;
        }

        100% {
            margin-right: 0;
        }
    }

    @-moz-keyframes show-chat-odd {
        0% {
            margin-right: -480px;
        }

        100% {
            margin-right: 0;
        }
    }

    @-webkit-keyframes show-chat-odd {
        0% {
            margin-right: -480px;
        }

        100% {
            margin-right: 0;
        }
    }

    .credits {
        text-align: center;
        margin-top: 35px;
        color: rgba(255, 255, 255, 0.35);
        font-family: 'Noto Sans', sans-serif;
    }

    .credits a {
        text-decoration: none;
        color: rgba(255, 255, 255, 0.35);
    }
</style>